<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ name }} 
      {{ name }}  
      {{ name }} 
      {{ msg }}
      {{ msg }}
      {{ test }}
    </div>
    <div id="app2"></div>
    <script src="/dist/vue.js"></script>
    <!-- 测试用例 -->
    <script>
      // 处理数据响应式， 数据发生变化，数据使用到的代码会进行同步变化
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            msg: 'hello vue',
            name: '张三',
            test: '456',
            arr: [1, 2, 3, { b: 1 }]
          }
        },
        methods: {},
        watch: {},
        components: {}
      })
      setTimeout(() => {
        vm.name = '李四'
        vm.msg = '123'
        vm.test = '4554'
        console.log(vm.$el)
        vm.$nextTick(() => {
          console.log(vm.$el)
        })
        vm.$nextTick(() => {
          console.log(vm.$el)
        })
      }, 1000)
    </script>
  </body>
</html>
